<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 手机商城</title>
    <meta name="keywords" content="手机商城, 用户中心, 注册, 登录, 个人资料, 订单历史">
    <meta name="description" content="欢迎来到手机商城用户中心，您可以在这里管理个人资料、查看订单历史、注册和登录。">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <style>
        /* 通用样式 */
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        /* 页头样式 */
        .header {
            background-color: #007bff;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .header input[type='text'] {
            padding: 10px;
            width: 80%;
            margin-top: 10px;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #333;
        }

        .navbar ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .navbar li {
            margin-right: 20px;
        }

        .navbar a {
            color: white;
            padding: 15px 20px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .navbar a:hover {
            background-color: #575757;
        }

        /* 下拉列表样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 主内容样式 */
        .content {
            padding: 20px;
            text-align: center; /* 居中内容 */
        }

        h2 {
            margin-bottom: 20px;
        }

        /* 用户中心内容样式 */
        .user-section {
            margin: 20px 0;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: left;
        }

        .user-section h3 {
            margin-bottom: 10px;
        }

        .user-section button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            transition: background-color 0.3s ease;
        }

        .user-section button:hover {
            background-color: #0056b3;
        }

        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 1000; /* 确保在其他元素之上 */
            left: 0;
            top: 0;
            width: 100%; /* 全屏宽度 */
            height: 100%; /* 全屏高度 */
            overflow: auto; /* 启用滚动条 */
            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
        }

        .modal-content {
            background-color: white; /* 模态框背景色 */
            margin: 15% auto; /* 中心对齐 */
            padding: 20px;
            border-radius: 10px; /* 圆角边框 */
            width: 300px; /* 固定宽度 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        .modal-header {
            font-size: 18px; /* 标题字体大小 */
            margin-bottom: 10px;
        }

        .modal input[type="text"],
        .modal input[type="password"],
        .modal input[type="email"] {
            width: calc(100% - 20px); /* 减去内边距 */
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        .modal button {
            background-color: #007bff;
            color: white;
            border-radius: 4px;
            border: none;
            padding: 10px;
            cursor: pointer;
            width: 100%; /* 让按钮填满宽度 */
        }

        .modal button:hover {
            background-color: #0056b3;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: red;
            text-decoration: none;
            cursor: pointer;
        }

        /* 页脚样式 */
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <header class="header">
        <h1>手机商城</h1>
        <input type="text" placeholder="搜索手机..." aria-label="搜索手机">
    </header>

    <nav class="navbar">
        <ul>
            <li><a href="index.html">首页</a></li>
            <li class="dropdown">
                <a href="javascript:void(0);">分类</a>
                <div class="dropdown-content">
                    <a href="computer-pad.html">电脑平板</a>
                    <a href="earphone.html">耳机</a>
                    <a href="sound.html">音响</a>
                    <a href="router.html">智能家居</a>
                    <a href="phone.html">手机</a>
                    <a href="smart.html">智能数码</a>
                </div>
            </li>
            <li><a href="user-center.html">用户中心</a></li>
            <li><a href="cart.html">购物车</a></li>
        </ul>
    </nav>

    <main class="content">
        <h2>欢迎来到手机商城用户中心！</h2>

        <!-- 用户中心功能 -->
        <div class="user-section">
            <h3>管理个人资料</h3>
            <button onclick="openModal('editProfile')">编辑资料</button>
        </div>

        <div class="user-section">
            <h3>地址管理</h3>
            <button onclick="openModal('manageAddresses')">管理地址</button>
        </div>

        <div class="user-section">
            <h3>支付方式</h3>
            <button onclick="openModal('managePayments')">管理支付方式</button>
        </div>

        <div class="user-section">
            <h3>订单历史</h3>
            <button onclick="viewOrderHistory()">查看订单历史</button>
        </div>

        <!-- 模态框 -->
        <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close" id="closeBtn">&times;</span>
                <div class="modal-header" id="modalHeader">用户登录 / 注册</div>
                <form id="user-form" onsubmit="handleSubmit(event)">
                    <label for="username">用户名:</label><br />
                    <input type="text" id="username" required /><br />

                    <label for="password">密码:</label><br />
                    <input type="password" id="password" required /><br />

                    <button type="submit">提交信息!</button>
                    <p id="message"></p>
                </form>
                <p>如果您没有账户，请 <a href="#" onclick="switchForm('register')">注册</a></p>
                <p><a href="#" onclick="switchForm('forgotPassword')">忘记密码?</a></p>
            </div>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; 2024 手机商城. 保留所有权利.</p>
    </footer>

    <script>
        function toggleDropDown() {
            const dropdown = document.querySelector(".dropdown-content");
            dropdown.style.display = dropdown.style.display === "none" || dropdown.style.display === "" ? "block" : "none";
        }

        // 显示模态框
        function openModal(type) {
            document.getElementById('myModal').style.display = "block";
            switch (type) {
                case 'editProfile':
                    document.getElementById('modalHeader').innerText = '编辑个人资料';
                    document.getElementById('user-form').innerHTML = `
                        <label for="name">姓名:</label><br />
                        <input type="text" id="name" required /><br />

                        <label for="email">邮箱:</label><br />
                        <input type="email" id="email" required /><br />

                        <button type="submit">保存更改</button>
                        <p id="message"></p>
                    `;
                    break;
                case 'manageAddresses':
                    document.getElementById('modalHeader').innerText = '管理地址';
                    document.getElementById('user-form').innerHTML = `
                        <label for="address">地址:</label><br />
                        <input type="text" id="address" required /><br />

                        <button type="submit">添加地址</button>
                        <p id="message"></p>
                    `;
                    break;
                case 'managePayments':
                    document.getElementById('modalHeader').innerText = '管理支付方式';
                    document.getElementById('user-form').innerHTML = `
                        <label for="paymentMethod">支付方式:</label><br />
                        <select id="paymentMethod" required>
                            <option value="creditCard">信用卡</option>
                            <option value="debitCard">借记卡</option>
                            <option value="paypal">PayPal</option>
                            <option value="wechat">微信</option>
                            <option value="alipay">支付宝</option>
                        </select><br />

                        <button type="submit">保存支付方式</button>
                        <p id="message"></p>
                    `;
                    break;
                default:
                    document.getElementById('modalHeader').innerText = '用户登录 / 注册';
                    document.getElementById('user-form').innerHTML = `
                        <label for="username">用户名:</label><br />
                        <input type="text" id="username" required /><br />

                        <label for="password">密码:</label><br />
                        <input type="password" id="password" required /><br />
                        
                        <button type="submit">提交信息!</button>
                        <p id="message"></p>
                    `;
                    break;
            }
        }

        // 切换表单类型
        function switchForm(type) {
            switch (type) {
                case 'register':
                    document.getElementById('modalHeader').innerText = '用户注册';
                    document.getElementById('user-form').innerHTML = `
                        <label for="username">用户名:</label><br />
                        <input type="text" id="username" required /><br />

                        <label for="email">邮箱:</label><br />
                        <input type="email" id="email" required /><br />

                        <label for="password">密码:</label><br />
                        <input type="password" id="password" required /><br />

                        <button type="submit">注册</button>
                        <p id="message"></p>
                    `;
                    break;
                case 'forgotPassword':
                    document.getElementById('modalHeader').innerText = '忘记密码';
                    document.getElementById('user-form').innerHTML = `
                        <label for="email">请输入您的邮箱:</label><br />
                        <input type="email" id="email" required /><br />

                        <button type="submit">发送重置链接</button>
                        <p id="message"></p>
                    `;
                    break;
                default:
                    document.getElementById('modalHeader').innerText = '用户登录 / 注册';
                    document.getElementById('user-form').innerHTML = `
                        <label for="username">用户名:</label><br />
                        <input type="text" id="username" required /><br />

                        <label for="password">密码:</label><br />
                        <input type="password" id="password" required /><br />

                        <button type="submit">提交信息!</button>
                        <p id="message"></p>
                    `;
                    break;
            }
        }

        // 隐藏模态框
        document.getElementById('closeBtn').onclick = function() {
            document.getElementById('myModal').style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target == document.getElementById('myModal')) {
                document.getElementById('myModal').style.display = "none";
            }
        }

        function handleSubmit(event) {
            event.preventDefault(); // 阻止表单默认提交
            const formType = document.getElementById('modalHeader').innerText;

            let message;
            switch (formType) {
                case '用户登录 / 注册':
                    const username = document.getElementById('username').value; // 获取用户名
                    message = `欢迎，${username}！信息已提交。`;
                    break;
                case '用户注册':
                    const regUsername = document.getElementById('username').value; // 获取注册用户名
                    message = `注册成功，欢迎，${regUsername}！`;
                    break;
                case '忘记密码':
                    const email = document.getElementById('email').value; // 获取邮件
                    message = `重置链接已发送到 ${email}，请检查您的邮箱。`;
                    break;
                case '编辑个人资料':
                    const name = document.getElementById('name').value; // 获取姓名
                    message = `资料已更新，欢迎，${name}！`;
                    break;
                case '管理地址':
                    const address = document.getElementById('address').value; // 获取地址
                    message = `地址已添加: ${address}`;
                    break;
                case '管理支付方式':
                    const paymentMethod = document.getElementById('paymentMethod').value; // 获取支付方式
                    message = `支付方式已更新为: ${paymentMethod}`;
                    break;
                default:
                    message = '信息已提交。';
                    break;
            }

            document.getElementById('message').innerText = message; // 显示消息

            // 模拟提交成功后关闭模态框
            setTimeout(function() { // 延迟模拟提交过程
                document.getElementById('myModal').style.display = "none";
            }, 2000);
        }

        function viewOrderHistory() {
            alert("正在加载订单历史...");
            // 在这里可以添加实际的订单历史查询逻辑
            setTimeout(function() {
                alert("订单历史加载完成！");
                // 这里可以显示订单历史的详细信息
            }, 2000);
        }
    </script>
</body>

</html>